<template>
  <div class="dashboard-container">
    <!--第一栏开始-->
    <el-row>
      <el-col :span="4">
        <p style="font-size: larger">新建/编辑项目</p>
      </el-col>
      <el-col :offset="16"  :span="4" style="margin-top: 15px">
        <span><el-button @click="save">保存</el-button></span>
        <span style="margin-left: 20px"><el-button @click="back">返回</el-button></span>
      </el-col>
    </el-row>
    <!--第一栏结束-->
    <el-divider></el-divider>
    <!--第二栏开始-->
      <div style="margin-left: 100px;width: 600px;">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="项目名称：">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="开始时间：">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间：">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="缺陷流程：">
          <el-select v-model="form.process" placeholder="请选择缺陷流程" @change="selectChange">
            <el-option label="TCE默认流程" value="TCE默认流程"></el-option>
          </el-select>
        </el-form-item>
        <el-alert
          style="margin-left: 90px;width: 60%;color: #9c631d"
          type="warning"
          :closable="false"
        >
          <template slot="title">
            <div style="font-size: 120%">温馨提示:</div>
            <div>1.有缺陷提交后则缺陷流程不可修改。</div>
            <div>2.可联系管理员定制缺陷流程，此功能收费。</div>
          </template>
        </el-alert>
        <el-form-item label="项目模块：">
          <el-input
            v-model="inputValue"
            ref="saveTagInput"
            placeholder="点击回车添加项目模块"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-tag
            :key="tag"
            v-for="tag in form.module"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
        </el-form-item>
        <el-form-item label="项目描述：">
          <el-input placeholder="填写项目描述信息" type="textarea" v-model="form.proDescribe"></el-input>
        </el-form-item>
        <el-form-item>
          <span><el-button @click="save">提交</el-button></span>
          <span style="margin-left: 20px"><el-button @click="back">返回</el-button></span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { addProject, updateProject } from '@/api/project'
    import { mapGetters } from 'vuex'

    export default {
      name: 'createPro',
      data(){
        return{
          inputValue: '',                               //绑定标签输入的变量
          //表单所有变量
            form: {
              title: '',
              process: '',
              startTime: '',
              endTime: '',
              delivery: false,
              module: [],
              resource: '',
              proDescribe: ''
            },
          }
      },
      computed: {
        ...mapGetters(["userInfo"])
      },
      methods:{
          //增加标签时回车的方法
        handleInputConfirm() {
          let inputValue = this.inputValue;
          if (inputValue) {
            this.form.module.push(inputValue);
          }
          this.inputVisible = false;
          this.inputValue = '';
        },
        //删除标签调用的方法
        handleClose(tag) {
          this.form.module.splice(this.form.module.indexOf(tag), 1);
        },
        //保存
        save(){
          if (this.form.invitCode != null){
            let params = this.form;
            updateProject(params).then(res => {
              this.$message({type:'success',message: res.msg})
              this.$router.push('/dashboard')
            }).catch(error => {
              this.$message({type:'error',message: '未知错误！'})
              console.log(error)
            })
          }else{
            let params = {};
            params = this.form
            this.$set(params,'founderId',this.userInfo.id)
            addProject(params).then(res => {
              this.$message({type:'success',message: res.msg})
              this.$router.push('/dashboard')
            }).catch(error => {
              this.$message({type:'error',message: '未知错误！'})
              console.log(error)
            })
          }
        },
          //返回
        back(){
          this.$router.push('/dashboard')
        },
        //缺陷流程的选择改变时调用的方法
        selectChange(value){
          this.form.process = value;
        },
      },
      mounted(){
        if (this.$route.query.obj){
          let s = JSON.parse(decodeURIComponent(this.$route.query.obj))
          this.form = s
        }
      }
    }
</script>

<style lang="scss" scoped>

</style>
